<template>
  <div class="homeView">
    <div class="first-data">
      <div class="commonFlex">
        <div class="guanli-txt commonTxt">总产废</div>
        <div class="guanli-txt">
          <span class="nums">{{ sumObj.produce.sum }}</span
          >吨
        </div>
      </div>
      <div class="guanli-content">
        <div class="guanli-item">
          <div class="name">今日产废</div>
          <div class="nums">
            {{ sumObj.produce.today ? sumObj.produce.today : 0 }}
          </div>
        </div>
        <div class="guanli-item">
          <div class="name">本月产废</div>
          <div class="nums">
            {{ sumObj.produce.month ? sumObj.produce.month : 0 }}
          </div>
        </div>
        <div class="guanli-item">
          <div class="name">上月产废</div>
          <div class="nums">
            {{ sumObj.produce.lastMonth ? sumObj.produce.lastMonth : 0 }}
          </div>
        </div>
      </div>
      <div class="commonFlex second-box">
        <div class="guanli-txt commonTxt">总处置</div>
        <div class="guanli-txt">
          <span class="nums">{{ sumObj.dispose.sum }}</span> 吨
        </div>
      </div>
      <div class="guanli-content">
        <div class="guanli-item">
          <div class="name">今日处置</div>
          <div class="nums">
            {{ sumObj.dispose.today ? sumObj.dispose.today : 0 }}
          </div>
        </div>
        <div class="guanli-item">
          <div class="name">本月处置</div>
          <div class="nums">
            {{ sumObj.dispose.month ? sumObj.dispose.month : 0 }}
          </div>
        </div>
        <div class="guanli-item">
          <div class="name">上月处置</div>
          <div class="nums">{{ sumObj.dispose.lastMonth }}</div>
        </div>
      </div>
      <div class="yujing">
        <div class="txt">今日处置</div>
        <div class="txt">
          {{ sumObj.todayWaringCount ? sumObj.todayWaringCount : 0 }}个
        </div>
      </div>
    </div>
    <div class="first-data">
      <div class="txt commonTxt">联单统计</div>
      <div class="lianDan">
        <div class="totals">总联单量</div>
        <div class="nums">{{ orderData.sum }}</div>
      </div>
      <div class="lianDan">
        <div class="totals">今日联单</div>
        <div class="nums">{{ orderData.todaySum }}</div>
      </div>
      <div class="lianDan">
        <div class="totals">已完成联单</div>
        <div class="nums finshLianDan">{{ orderData.finish }}</div>
      </div>
      <div class="lianDan">
        <div class="totals">进行中联单</div>
        <div class="nums ingLianDan">{{ orderData.ing }}</div>
      </div>
    </div>
    <div class="first-data">
      <div class="commonFlex solidType">
        <div class="commonTxt">固废类型</div>
        <div class="rightType">
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <div class="selectBox">{{ timeTxt }}</div>
            </template>
          </van-popover>
        </div>
      </div>
      <barChartVue :timeValue="timeValue"></barChartVue>
    </div>
    <div class="first-data bottom-view">
      <div class="commonTxt">车辆管理</div>
      <div class="lianDan">
        <div class="totals">总车辆</div>
        <div class="nums">{{ VechicleList.sum }}</div>
      </div>
      <div class="lianDan">
        <div class="totals">运输中</div>
        <div class="nums transportingLianDan">
          {{ VechicleList.transporting }}
        </div>
      </div>
      <div class="lianDan">
        <div class="totals">停运中</div>
        <div class="nums stopLianDan">{{ VechicleList.stop }}</div>
      </div>
      <tableVue></tableVue>
    </div>
  </div>
</template>
<script>
import {
  jointOrderStat,
  sumProduceDispose,
  vehicleStatics,
} from "../utils/api";
import barChartVue from "./barChart.vue";
import tableVue from "./table.vue";
export default {
  components: {
    tableVue,
    barChartVue,
  },
  data() {
    return {
      sumObj: {
        dispose: {
          lastMonth: 0,
          month: 0,
          sum: 0,
          today: 0,
        },
        produce: {
          lastMonth: 0,
          month: 0,
          sum: 0,
          today: 0,
        },
        waringWaitMoveSum: 0,
      },
      orderData: {
        sum: 0,
        ing: 0,
        finish: 0,
        todaySum: 0,
      },
      VechicleList: {
        sum: 0,
        transporting: 0,
        stop: 0,
      },
      companyId: "",
      showPopover: false,
      actions: [
        { text: "全部", value: 0 },
        { text: "本周", value: 1 },
        { text: "本月", value: 2 },
        { text: "本季度", value: 3 },
        { text: "本年", value: 4 },
      ],
      timeValue: 0,
      timeTxt: "全部",
    };
  },
  created() {
    let userData = JSON.parse(localStorage.getItem("useroBJ"));
    this.companyId = userData.companyId;
  },
  mounted() {
    this.getSumProduceDispose();
    this.geOrderStat();
    this.getVechicle();
  },
  methods: {
    onSelect(val) {
      this.timeValue = val.value;
      this.timeTxt = val.text;
    },
    async getVechicle() {
      const { data } = await vehicleStatics(this.companyId, "entDetails");
      if (data.success) {
        this.VechicleList = data.data;
      } else {
        Toast(data.message);
      }
    },
    async getSumProduceDispose() {
      const { data } = await sumProduceDispose(this.companyId);
      console.log("data===", data);
      if (data.success) {
        this.sumObj = data.data;
        console.log(" this.sumObj", this.sumObj);
      } else {
        Toast(data.message);
      }
    },
    async geOrderStat() {
      const { data } = await jointOrderStat(this.companyId);
      if (data.success) {
        this.orderData = {
          sum: data.data.sum,
          ing: data.data.ing,
          finish: data.data.finish,
          todaySum: data.data.todaySum,
        };
      } else {
        Toast(data.message);
      }
    },
  },
};
</script>
<style lang="less">
.homeView {
  padding: 10px;
  text-align: left;
  .commonTxt {
    font-size: 18px;
    color: #042780;
  }
  .rightType {
    margin-right: 20px;
  }
  .selectBox {
    color: #409eff;
  }
  .commonFlex {
    display: flex;
    justify-content: space-between;
    .nums {
      color: #409eff;
    }
  }
  .first-data {
    box-shadow: 0 0 4px #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
  .guanli-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .guanli-item {
      flex: auto;
      text-align: center;
      .name {
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 16px;
        color: #8d919a;
        line-height: 19px;
        margin: 10px 0;
      }
      .nums {
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 16px;
        color: #2157e3;
        line-height: 19px;
      }
    }
  }
  .yujing {
    display: flex;
    margin-top: 8px;
    justify-content: space-between;
    background: rgba(255, 77, 0, 0.81);
    box-shadow: 0px 11 21px 0px rgba(255, 222, 183, 0.15);
    border-radius: 15px 15px 15px 15px;
    padding: 8px 20px;
    .txt {
      font-family: Inter, Inter;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
    }
  }
  .lianDan {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .nums {
      color: #409eff;
    }
  }
  .finshLianDan {
    color: #13ce66 !important;
  }
  .ingLianDan {
    color: #ffba00 !important;
  }
  .transportingLianDan {
    color: #409eff !important;
  }
  .stopLianDan {
    color: #ff4949 !important;
  }
  .bottom-view {
    margin-bottom: 100px;
  }
  .second-box {
    margin-top: 10px;
  }
  .solidType {
    margin-bottom: 10px;
  }
  .van-popover__action {
    height: 40px !important;
  }
}
</style>
